<template>
  <view class="f_row_center" style="font-size: 24rpx;background: #ffffff">
    <view class="flex_1" style="margin-left: 30rpx">
      <span v-if="title1!=null">{{ hint1 }}<span style="color: #4575F2;margin-right: 10rpx;"  v-html="title1"></span></span>
      <span v-if="title2!=null"> {{ hint2 }}<span style="color: #4575F2">{{ title2 }}</span> </span>
    </view>

    <view @click="showDrawer" class="f_row_center" style="padding: 20rpx 30rpx">
      筛选
      <image src="/static/select_data.png" style="height: 34rpx;width: 34rpx"/>
    </view>
    <uni-drawer ref="draw" mode="right" :mask-click="false" :width="drawWidth">
      <draw-select-view :list="selectList" @sure="sure" @cancel="closeDrawer"/>
    </uni-drawer>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";
import DrawSelectView from "@/pages/components/draw_select_view.vue";
import {mixins} from "vue-class-component";
import StateConfig from "@/mixins/StateConfig";

@Component({
  components: {
    DrawSelectView,
  }
})
export default class SelectHeadView extends mixins(Vue, StateConfig) {
  @Prop() title1?: any;
  @Prop() title2?: any;
  @Prop() hint1?: any;
  @Prop() hint2?: any;

  @Prop() selectList?: any;

  sure(title: any, ind: any, index: any) {
    this.$emit('sure',title,ind,index)
    this.closeDrawer();
  }
 

  showDrawer() {
    (this.$refs.draw as any).open();
  }

  closeDrawer() {
    (this.$refs.draw as any).close();
  }
}
</script>

<style scoped>

</style>